<template>
	<view v-if="isRender">
		<view class="form-box">
			<u-form labelPosition="top" labelStyle="color:#ffffff" :labelWidth="200" :model="formData">
				<u-form-item :label="getStr('login.email')" prop="email">
					<!-- #ifndef APP-NVUE -->
					<u-input v-model="formData.email" :placeholder="getStr('login.email.placeholder')" color="#ffffff"
						placeholderStyle="color:#666666" readonly border="none">
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u-input v-model="formData.email" :placeholder="getStr('login.email.placeholder')" color="#ffffff"
							placeholderStyle="color:#666666" border="none">
						<!-- #endif -->
							<template #suffix>
								<u-code :startText="getStr('login.startText')" :changeText="getStr('login.changeText')"
									:endText="getStr('login.endText')" ref="uCodeRef" @change="codeChange"></u-code>
								<u-button @tap="getCode" :text="tips" type="success" size="mini"
									color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)"></u-button>
							</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u-input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item :label="getStr('login.verify.code')" prop="code" class="verify-code">
					<u-input v-model="formData.code" :placeholder="getStr('login.verify.code.placeholder')" color="#ffffff"
						placeholderStyle="color:#666666" border="none"></u-input>
				</u-form-item>
				<u-form-item :label="getStr('my.mySetting.newemail')" prop="newEmail">
					<u-input type="email" v-model="formData.newEmail" :placeholder="getStr('my.mySetting.placeholder')"
						color="#ffffff" placeholderStyle="color:#666666" border="none"></u-input>
				</u-form-item>
			</u-form>
			<view style="margin-top: 0;">
				<sysButton :loading="loading" :disabled="formData.newEmail && formData.code ? false : true"
					:text="getStr('confirm')" :handleChange="setPayPassFn"></sysButton>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sysButton from '@/components/sysButton/index.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {updateEmail,getEditEmailCode} from '@/common/api/common.js'

	const phoneLogin = () => {}
	const isRender = ref(true)
	const tips = ref('Seed');
	const uCodeRef = ref(null)
	const formData = reactive({
		email: '',
		code: '',
		newEmail: '',
	})
	const loading = ref(false)


	const codeChange = (text) => {
		console.log(text)
		tips.value = text;
	};
	const getCode = async () => {
		if (!formData.email) {
			uni.$u.toast('Please fill in your email address')
			return;
		}
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: 'verification code',
			});
			const res = await getEditEmailCode({
				email: formData.email
			})
			if (res.code == 200) {
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('Verification code has been sent');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			}
		} else {
			uni.$u.toast('Send after the countdown is over');
		}
	};
	const setPayPassFn = async () => {
		const res = await updateEmail({
			telegramId: uni.getStorageSync('userInfo').telegramId,
			emailCode: formData.code,
			newEmail: formData.newEmail,
		});
		if (res.code == 200) {
			uni.$u.toast(getStr('toast.successfully'))
			uni.switchTab({
				url:'/pages/my/index'
			});
		} else {
			uni.$u.toast(res.message)
		}
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}

	onShow(() => {
		uni.$tg.showButton()
		setIsRender()
		formData.email = uni.getStorageSync('userInfo').email
	})
</script>

<style>
	page {
		background: #1C1E23;
	}
</style>

<style lang="scss" scoped>
	.form-box {
		width: calc(100vw - 28rpx - 28rpx);
		padding-top: 28rpx;
		margin: 0 auto;

		::v-deep .u-form-item {
			margin-bottom: 20rpx;

			text {}
		}

		::v-deep .u-form-item__body__left {
			margin-bottom: 24rpx;
		}

		::v-deep .u-form-item {
			margin-bottom: 0;
		}

		::v-deep .u-form-item__body {
			padding: 0 0 50rpx;
		}

		::v-deep .u-input {
			background-color: #262930;
			height: 88rpx;
			padding: 0 18rpx 0 28rpx !important;
			box-sizing: border-box;
			font-size: 28rpx;
		}

		.verify-code {
			::v-deep .u-button {
				height: 54rpx;
			}
		}
	}
</style>